<template>
  <el-dialog
    v-model="dialogVisible"
    :before-close="handleClose"
    title="选择市场准入信息"
    width="1000px"
  >

    <el-form
      :inline="true"
      :model="formData"
      label-position="right"
      size="small"
    >
      <el-row>

        <el-col :span="6">
          <el-form-item label="产品信息">
            <el-input
              v-model="formData.keyWord"
              clearable
              placeholder="输入产品名称、通用名、批准文号关键字查询"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="准入地区">
            <el-cascader
              ref="cascader"
              v-model="formData.areas"
              :options="citys"
              :props="props1"
              clearable
              collapse-tags
              placeholder="请选择地区"
              @change="areaChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="适用终端">
            <el-select
              v-model="formData.terminalType"
              clearable
              placeholder="适用终端"
              style="width: 100%"
            >
              <el-option
                v-for="item in appOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button
              plain
              size="small"
              type="primary"
              @click="resat"
            >重置</el-button>
            <el-button
              plain
              size="small"
              type="primary"
              @click="onSearch"
            >查询</el-button>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <el-table
      :data="tableData"
      border
      header-cell-class-name="table-header"
      highlight-current-row
      max-height="350"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        :min-width="120"
        header-align="center"
        label="市场准入名称"
        prop="chanceName"
        show-overflow-tooltip
      />
      <el-table-column
        :min-width="150"
        align="center"
        label="准入地区"
      >
        <template #default="scope">
          <area-list-view :areas="scope.row.region" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="适用终端"
        width="100"
      >
        <template #default="scope">
          {{ getLabel('app_mode', scope.row.terminalType) }}
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        header-align="center"
        label="通用名"
        prop="productPopularName"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        label="商品名"
        prop="productName"
        show-overflow-tooltip
        width="130"
      />
      <el-table-column
        label="包装规格"
        prop="packSpecs"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        label="生产厂家"
        prop="producer"
        show-overflow-tooltip
        width="100"
      />
    </el-table>

    <Pagination
      v-model:limit="formData.pageSize"
      v-model:page="formData.page"
      :total="total"
      style="display: flex; justify-content: flex-end;padding-bottom: 0"
      @pagination="getList"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          @click="dialogConfirm"
        >确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { crmStore } from '../../../store'
import area from '../../../../../utils/area'
import {
  defineComponent,
  getCurrentInstance,
  inject,
  reactive,
  toRefs,
} from 'vue'

export default defineComponent({
  name: 'ChanceDialog',
  props: {
    type: {
      type: String,
      default: '1',
    },
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const appOptions = crmStore.getters['dictionary/getDictionary']['app_mode']
    const props1 = reactive({
      multiple: true,
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })
    var data = reactive({
      dialogVisible: false,
      selects: null,
      tableData: [],
      formData: {
        page: 1,
        pageSize: 20,
        areas: [],
        terminalType: '',
        keyWord: '',
        chanceStatus: '2',
      },
      total: 0,
      citys: area,
      cascader: null,
    })

    const openDialog = () => {
      data.dialogVisible = true
      getList()
    }

    const getList = () => {
      api.chance
        .CHANCE_LIST({ ...data.formData, planType: props.type })
        .then((res) => {
          if (res.code == 0) {
            if (res.data.list != null) {
              data.tableData = res.data.list
            } else {
              data.tableData = []
            }
            data.total = res.data.total
          }
        })
    }

    const resat = () => {
      data.formData = {
        page: 1,
        pageSize: 20,
        areas: [],
        terminalType: '',
        keyWord: '',
        chanceStatus: '2',
      }
      getList()
    }

    const onSearch = () => {
      data.formData.page = 1
      getList()
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        data.cascader.getCheckedNodes()
      )
      data.formData.region = serve
      onSearch()
    }

    const handleClose = () => {
      data.dialogVisible = false
      data.selects = null
      data.total = 0
      data.tableData = []
      data.formData.page = 1
      data.formData.pageSize = 20
    }

    const dialogConfirm = () => {
      if (!data.selects) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择市场准入',
        })
        return
      }
      // const str = data.selects.provinceName + data.selects.cityName + data.selects.areaName + data.selects.addressDetail

      emit('confirm', { ...data.selects })

      handleClose()
    }

    const handleSelectionChange = (val) => {
      data.selects = val
    }

    const handleCurrentChange = (val) => {
      data.selects = val
    }

    return {
      ...toRefs(data),
      appOptions,
      props1,

      openDialog,
      handleClose,
      dialogConfirm,
      handleSelectionChange,
      handleCurrentChange,
      getList,
      onSearch,
      resat,
      areaChange,
    }
  },
})
</script>

<style scoped>
</style>
